<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="sie-edge">
    <link rel="stylesheet" type="text/css" href="<< url_for('static', filename='css/login_style.css') >>">
    <title><< title >>—魔都子沐</title>
    <!--图标库-->
    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
</head>
<body>
<div class="container <% if state=='register' %>right-panel-active<% endif %>" id="container">
    <div class="form-container sign-up-container">
        <form id="register_form">
            <input type="text" name="nickname" placeholder="昵称">
            <input type="email" name="email" placeholder="邮箱">
            <input type="password" name="password" placeholder="密码">
            <button type="button" id="register_btn">注册</button>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form method="post">
            <input type="email" name="email" placeholder="邮箱">
            <input type="password" name="password" placeholder="密码">
            <button>登录</button>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>欢迎回来</h1>
                <p>与我们保持联系请登录您的个人信息</p>
                <button class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>欢迎光临</h1>
                <p>输入您的个人资料，并与我们一起开始旅程</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>
<script src="<< url_for('static', filename='js/login/script.js') >>"></script>
<script src="/static/layui/layui.all.js?t=1483944306685" charset="utf-8" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script>
 <%  with messages=get_flashed_messages() %>
        <% if messages %>
            <% for message in messages %>
                var layer=layui.layer;
                layer.msg("<< message >>",{time:3000})
            <% endfor %>
        <% endif %>
    <% endwith %>
</script>
<script>
    $('#register_btn').click(function () {
        var formdata=new FormData($('#register_form')[0]);
        console.log(formdata);
         $.ajax({
             url:"<< url_for('main.register') >>",
             type:'post',
             data:$('#register_form').serialize(),
             dataType:'json',
             success : function(data) {
                 if(data.state==1){
                     alert('注册成功,请到邮箱进行激活');
                     setTimeout(function(){ window.location.href="<< url_for('main.login') >>" },1000);
                 }
                 else{
                     alert(data.msg)
                 }
              },
             error : function() {
                alert("提交异常");
             }
         })
     })
</script>
</body>
</html>